<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { imagePath } from '@/libs/file-utils'
import { clear, sign, updateUserDetail, userDetail } from './data'
import { userInfo } from '@/libs/user'

const img_bg = imagePath('user/info/bg.jpg')
const img_avatar = imagePath('user/info/avatar.png')
const icon_vip = imagePath('user/info/icon-vip.png')
const card_mbti = imagePath('user/info/card-mbti.png')
const card_sign = imagePath('user/info/card-sign.png')
const icon_star = imagePath('user/info/icon-star.png')
// const btn_left = imagePath('user/info/btn-left.png')
// const btn_right = imagePath('user/info/btn-right.png')
const icon_edit = imagePath('user/info/icon-edit.svg')
const icon_hand = imagePath('user/info/icon-hand.png')
const icon_reset = imagePath('user/info/icon-reset.svg')
const btn_bg = imagePath('user/info/btn-bg.png')

// const toVipContent = () => uni.navigateTo({ url: '/pages/user/vip-content/index' })
// const toVipRule = () => uni.navigateTo({ url: '/pages/user/vip-rule/index' })
const toEdit = () => uni.navigateTo({ url: '/pages/user/edit-info/index' })
const toTest = () => uni.navigateTo({ url: '/pages/quiz/mbti/choose/index' })
const toRecharge = () => uni.navigateTo({ url: '/pages/pay/recharge/index' })
const toCommunity = () => uni.navigateTo({ url: '/pages/community/friend/list/index' })

onMounted(updateUserDetail)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    v-if="userDetail"
    name="user-info"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div class="user-bar">
      <div
        class="avatar"
        :style="{ backgroundImage: img_avatar }"
      ></div>
      <div class="right">
        <div
          class="name-bar"
          @click="toEdit"
        >
          {{ userDetail.nickname }}
          <div
            class="vip"
            :class="{ active: userInfo?.vipStatus === 1 }"
            :style="{ backgroundImage: icon_vip }"
          ></div>
          <div
            class="edit"
            :style="{ backgroundImage: icon_edit }"
          ></div>
        </div>

        <div
          class="tip"
          @click="toRecharge"
        >
          {{ userInfo?.vipStatus !== 1 ? '开通会员，解锁全部特权' : ('ID: ' + userInfo?.id) }}
          <div
            v-if="userInfo?.vipStatus !== 1"
            class="icon"
            :style="{ backgroundImage: icon_hand }"
          ></div>
        </div>

        <div
          class="reset"
          @click="toTest"
        >
          <div
            class="icon"
            :style="{ backgroundImage: icon_reset }"
          ></div>
          重新测试
        </div>
      </div>
    </div>

    <div class="mbti">
      <div
        class="card"
        :style="{ backgroundImage: card_mbti }"
      >
        <div
          class="icon"
          :style="{ backgroundImage: imagePath('constellation/' + userDetail.zodiacSignIcon) }"
        ></div>
        <div class="text">{{ userDetail.zodiacSign }}</div>
      </div>
      <div
        class="card"
        :style="{ backgroundImage: card_mbti }"
      >
        <div
          class="icon"
          :style="{ backgroundImage: imagePath('mbti/' + userDetail.mbtiIcon) }"
        ></div>
        <div class="text">{{ userDetail.mbtiType }}</div>
      </div>
    </div>

    <div
      class="sign-box"
      :style="{ backgroundImage: card_sign }"
    >
      <div class="desc">每日签到<span class="val">一个人签到太孤独？拉上好友，每日赢福利</span></div>
      <div class="points">蒜瓣：<span class="val">{{ userDetail.signin.balanceDesc }}</span></div>
      <div class="days">
        <div
          v-for="(item, index) in userDetail.signin.signinList"
          :key="index"
          class="item"
          :class="{ active: item.signin }"
        >
          <div
            class="icon"
            :style="{ backgroundImage: icon_star }"
          ></div>
          {{ item.pointsDesc }}
          <div class="name">{{ item.date }}</div>
        </div>
      </div>
      <div
        class="sign"
        :class="{ disabled: userDetail.signin.signin }"
        @click="sign"
      >{{ userDetail.signin.signin ? '已签到' : '签到' }}</div>
    </div>

    <div
      class="box"
      :style="{ backgroundImage: btn_bg }"
    >
      <div
        class="click-area"
        @click="toCommunity"
      ></div>
    </div>

    <!-- <div class="btns">
      <div
        class="btn"
        :style="{ backgroundImage: btn_left }"
        @click="toVipContent"
      >详情权益</div>
      <div
        class="btn"
        :style="{ backgroundImage: btn_right }"
        @click="toVipRule"
      >成长规则</div>
    </div> -->
  </PageWrapper>
</template>

<style lang="less" scoped>
.user-bar {
  width: 100%;

  margin-top: 10rpx;

  display: flex;

  .avatar {
    width: 180rpx;
    height: 210rpx;

    margin-left: 32rpx;
  }

  .right {
    position: relative;
    flex: 1;

    margin-top: 30rpx;
    margin-left: 34rpx;

    .name-bar {
      display: flex;
      align-items: flex-end;

      color: #230012;
      font-size: 72rpx;
      line-height: 88rpx;

      .vip {
        width: 44rpx;
        height: 36rpx;

        margin-left: 6rpx;

        filter: grayscale(100%);

        &.active {
          filter: none;
        }
      }

      .edit {
        width: 28rpx;
        height: 28rpx;

        margin-left: 16rpx;
      }
    }

    .tip {
      margin-top: 8rpx;

      display: flex;
      align-items: center;

      color: #754A42;
      font-size: 24rpx;
      line-height: 40rpx;

      .icon {
        width: 20rpx;
        height: 20rpx;

        margin-left: 6rpx;
      }
    }

    .reset {
      position: absolute;
      top: 94rpx;
      right: 32rpx;

      padding: 6rpx 16rpx;

      display: flex;
      align-items: center;

      border-radius: 44rpx;
      background-color: #FFAFD4;

      color: #fff;
      font-size: 24rpx;
      line-height: 34rpx;

      .icon {
        width: 34rpx;
        height: 34rpx;

        margin-right: 10rpx;
      }
    }
  }
}

.mbti {
  width: 100%;

  margin-top: 60rpx;

  display: flex;
  justify-content: center;

  .card {
    position: relative;
    width: 329rpx;
    height: 175rpx;

    margin: 0 20rpx;

    .icon {
      position: absolute;
      top: -60rpx;
      left: 50%;
      transform: translateX(-50%);

      width: 176rpx;
      height: 176rpx;
    }

    .text {
      position: absolute;
      bottom: 16rpx;
      left: 50%;
      transform: translateX(-50%);

      color: #230011;
      font-size: 32rpx;
      line-height: 40rpx;
    }
  }
}

.sign-box {
  width: 702rpx;
  // height: 416rpx;

  margin: 30rpx auto 0;

  box-sizing: border-box;
  padding: 32rpx 52rpx;

  .desc {
    color: #222;
    font-size: 32rpx;
    line-height: 46rpx;

    .val {
      margin-left: 8rpx;

      color: #8769AC;
      font-size: 28rpx;
    }
  }

  .points {
    margin-top: 6rpx;

    color: #222;
    font-size: 32rpx;
    line-height: 46rpx;

    .val {
      color: #A55BFF;
    }
  }

  .days {
    width: 100%;

    margin-top: 30rpx;

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 16rpx;

    .item {
      position: relative;
      height: 82rpx;

      box-sizing: border-box;
      border-radius: 16rpx;
      background-image: linear-gradient(180deg, #F5F0FF 0%, #EDF2FE 100%);

      color: #8743E1;
      font-size: 32rpx;
      line-height: 106rpx;
      text-align: center;

      .icon {
        position: absolute;
        top: -20rpx;
        left: 50%;
        transform: translateX(-50%);

        width: 52rpx;
        height: 49rpx;
      }

      .name {
        position: absolute;
        top: calc(100% + 8rpx);
        left: 50%;
        transform: translateX(-50%);

        color: #787878;
        font-size: 20rpx;
        line-height: 28rpx;
        white-space: nowrap;
      }

      &.active {
        color: #fff;
        border: 2rpx solid #a55bff;
        background-image: linear-gradient(180deg, #BE9EFF 0%, #97B5FF 100%);

        .name {
          color: #8742E1;
        }
      }
    }
  }

  .sign {
    width: 238rpx;
    height: 68rpx;

    margin: 62rpx auto 0;

    border-radius: 34rpx;
    background-image: linear-gradient(95deg, #A38CFC 0%, #5F6BF4 50%, #2CB7EC 100%);

    color: #fff;
    font-size: 30rpx;
    line-height: 68rpx;
    text-align: center;

    &.disabled {
      filter: grayscale(1);
      pointer-events: none;
    }
  }
}

.box {
  position: relative;
  width: 727rpx;
  height: 173rpx;

  margin: 10rpx auto 0;

  .click-area {
    position: absolute;
    top: 46rpx;
    right: 58rpx;

    width: 148rpx;
    height: 74rpx;
  }
}

// .btns {
//   width: 100%;

//   margin-top: 50rpx;

//   display: flex;
//   justify-content: center;
//   column-gap: 10rpx;

//   .btn {
//     width: 357rpx;
//     height: 183rpx;

//     color: #230011;
//     font-size: 48rpx;
//     line-height: 170rpx;
//     text-align: center;
//   }
// }
</style>